<template>
  <div class="todo-container">
    <!-- 添加新待办 -->
    <el-card class="add-todo-card">
      <el-input
        v-model="newTodoTitle"
        placeholder="添加新的待办事项..."
        @keyup.enter="handleAddTodo"
        size="large"
      >
        <template #append>
          <el-button @click="handleAddTodo" type="primary">
            <el-icon><Plus /></el-icon>
            添加
          </el-button>
        </template>
      </el-input>
    </el-card>

    <!-- 筛选器 -->
    <el-card class="filter-card">
      <el-radio-group v-model="todoStore.filter" size="large">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="active">待完成</el-radio-button>
        <el-radio-button label="completed">已完成</el-radio-button>
      </el-radio-group>
      <el-button 
        v-if="todoStore.completedCount() > 0"
        @click="todoStore.clearCompleted"
        type="danger"
        size="small"
      >
        清除已完成
      </el-button>
    </el-card>

    <!-- 待办列表 -->
    <el-card class="todo-list-card">
      <div class="todo-stats">
        <span>总计: {{ todoStore.todos.length }} 项</span>
        <span>待完成: {{ todoStore.activeCount() }} 项</span>
        <span>已完成: {{ todoStore.completedCount() }} 项</span>
      </div>

      <el-empty 
        v-if="filteredTodos.length === 0" 
        description="暂无待办事项"
        :image-size="100"
      />

      <div v-else class="todo-list">
        <div 
          v-for="todo in filteredTodos" 
          :key="todo.id"
          class="todo-item"
        >
          <el-checkbox 
            v-model="todo.completed"
            @change="() => todoStore.toggleTodo(todo.id)"
            size="large"
          />
          
          <div class="todo-content">
            <span :class="{ completed: todo.completed }">{{ todo.title }}</span>
            <p v-if="todo.description" class="todo-description">{{ todo.description }}</p>
          </div>

          <div class="todo-actions">
            <el-button 
              @click="handleEdit(todo)" 
              type="primary" 
              :icon="Edit" 
              circle 
              size="small"
            />
            <el-button 
              @click="handleDelete(todo.id)" 
              type="danger" 
              :icon="Delete" 
              circle 
              size="small"
            />
          </div>
        </div>
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑待办事项"
      width="500px"
    >
      <el-form :model="editingTodo">
        <el-form-item label="标题">
          <el-input v-model="editingTodo.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="editingTodo.description"
            type="textarea"
            :rows="3"
            placeholder="请输入描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateTodo">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useTodoStore } from '../stores/todo'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'

const todoStore = useTodoStore()

const newTodoTitle = ref('')
const editDialogVisible = ref(false)
const editingTodo = ref({
  id: null,
  title: '',
  description: ''
})

const filteredTodos = computed(() => todoStore.filteredTodos())

const handleAddTodo = () => {
  if (!newTodoTitle.value.trim()) {
    ElMessage.warning('请输入待办事项标题')
    return
  }
  
  todoStore.addTodo(newTodoTitle.value)
  newTodoTitle.value = ''
  ElMessage.success('添加成功')
}

const handleEdit = (todo) => {
  editingTodo.value = { ...todo }
  editDialogVisible.value = true
}

const handleUpdateTodo = () => {
  if (!editingTodo.value.title.trim()) {
    ElMessage.warning('请输入标题')
    return
  }
  
  todoStore.updateTodo(editingTodo.value.id, {
    title: editingTodo.value.title,
    description: editingTodo.value.description
  })
  
  editDialogVisible.value = false
  ElMessage.success('更新成功')
}

const handleDelete = (id) => {
  ElMessageBox.confirm(
    '确定要删除这个待办事项吗？',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    todoStore.deleteTodo(id)
    ElMessage.success('删除成功')
  })
}
</script>

<style scoped>
.todo-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.add-todo-card,
.filter-card,
.todo-list-card {
  margin-bottom: 20px;
}

.filter-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: all 0.3s;
}

.todo-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.todo-content {
  flex: 1;
}

.todo-content span {
  font-size: 16px;
  font-weight: 500;
}

.todo-content span.completed {
  text-decoration: line-through;
  color: #999;
}

.todo-description {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #666;
}

.todo-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 768px) {
  .todo-container {
    padding: 10px;
  }
  
  .todo-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .todo-actions {
    align-self: flex-end;
  }
}
</style>
